<template>
  <div>
    <ul>
     <li @click="fnn1()"><img src="https://img.youpin.mi-img.com/jianyu/efb5e1c094c3e185d2add3e49bee0366.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>上新精选</p></li>
     <li><img src="https://img.youpin.mi-img.com/jianyu/24c86a799f3ea8ccfa675ff7563d50fb.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>小米众筹</p></li>
     <li><img src="https://img.youpin.mi-img.com/jianyu/912d7d210a6a5771f5946f1a8ac39014.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>有品秒杀</p></li>
     <li @click="fnn3()"><img src="https://img.youpin.mi-img.com/jianyu/cac2205702a4acc7224b6f51308c0dd5.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>热销排行</p></li>
     <li><img src="https://img.youpin.mi-img.com/jianyu/86f2eec7a623371ffe3bcb01153082d9.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>小米自营</p></li>
     <li><img src="https://img.youpin.mi-img.com/jianyu/9fedd5f2eae9cff33edf085e0cc11547.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>下单立返</p></li>
     <li @click="fnn2()"><img src="https://img.youpin.mi-img.com/jianyu/5dcc1a724b7d89543e0f52b6c486ef6a.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>9.9包邮</p></li>
     <li><img src="https://img.youpin.mi-img.com/jianyu/5aa5aa6b24eb494d6f38988c4b7babb6.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>有品直播</p></li>
     <!-- <li><img src="https://img.youpin.mi-img.com/jianyu/efb5e1c094c3e185d2add3e49bee0366.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt=""><p>智能生活</p></li> -->
    </ul>
  </div>
</template>

<script>
export default {
methods: {
fnn1(){
  this.$router.push("/shangxin")
},
fnn2(){
  this.$router.push("/free")
},
fnn3(){
  this.$router.push("/Index")
},
},
}
</script>

<style scoped>

img{
  width: 50px;
  height: 50px;
}
ul{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  text-align: center;
  line-height: 25px;
}
li{
  /* width: 76px;
  height: 72px; */
  width: 24%;
}
p{
  text-align: center;
  margin-top: -4px;
  /* margin-right: 25px; */
  font-size: 5px;
}
</style>